<template>
    <view class="wrap">
    <view class="shopper">
        <u-avatar :src="shopInfo.logo" size="mini"  @click="getnav('/pagesC/shop/shopIntroduce?shop_id=' + shopInfo.id)"></u-avatar>
        <view class="shopper-content">
            <view class="shopper-content-center"  @click="getnav('/pagesC/shop/shopIntroduce?shop_id=' + shopInfo.id)">
                  <h3>{{ shopInfo.shop_name }}
                  <u-icon name="arrow-right" color="#333" size="28"></u-icon>
                </h3>
                  <u-tag :text="$t('品牌直营')" type="info" size="mini" mode="light" class="u-m-r-10" />
            </view>
            <view class="shopper-attention" :class="this.isFollow?'shopper-attention-followed':''" @click="clickcoll">{{this.isFollow?'已关注':'+ 关注'}}</view>
        </view>
    </view>
       <view class="shopper-datashow">
            <p class="shopper-datashow-item">
                <span  class="shopper-datashow-item-count">
                    {{shopInfo.praise_lv*1000}}
                    </span>
                    <span  class="shopper-datashow-item-desc">好评</span>
                </p>
                 <p  class="shopper-datashow-item">
                <span class="shopper-datashow-item-count">
                    {{shopInfo.deal_num}}
                    </span>
                    <span  class="shopper-datashow-item-desc">成交量 </span>
                </p>
                <p  class="shopper-datashow-item" @click="goShopperVideoCenter">
                     <span class="shopper-datashow-item-count"> {{ shopInfo.short_video_count }} <span class="shopper-datashow-item-desc">个作品</span>
                      <u-icon name="arrow-right" color="#333" size="12"></u-icon>
                      </span>
                    <span class="shopper-datashow-item-desc">视频号</span>
                </p>
        </view>
     </view>
</template>

<script>
export default {
    name: 'shopperHeader',
    data() {
        return {
            isFollow: 0
        }
    },
    props: {
        shopInfo: {
            type: Object,
            default: ()=>{}
        }
    },
    methods: {
			/**
			 * 关注
			 */
             goShopperVideoCenter(){
                this.$u.route({
                    url: '/pages/tabBar/cart'
                })
             },
        clickcoll() {
                console.log(this.shopInfo);
				if (!uni.getStorageSync('token')) {
					return uni.redirectTo({
						url: '/pages/loginSon/login'
					});

				}
				let list = ['getshopcoll', 'getshopcancelcoll']

                let index = list[Number(this.isFollow)]
                const {id:shop_id} = this.shopInfo
				this.$http[index]({
					shop_id
				}).then(res => {
                    this.$toast(res.mess)
                    this.isFollow = !this.isFollow

				})
			}
    }
    }
</script>

<style lang="scss" scoped>
.wrap{
  background: #Fff;
      border-radius: 8rpx;
        margin: 0 16rpx;
}
.shopper{
    display: flex;
    align-items: center;
    &-content{
        display: flex;
         align-items: center;
         justify-content: space-between;
         flex:1;
         margin-left: 14rpx;
    }
    &-attention{
        background-color: #ff445a;
        color:#fff;
        padding: 6rpx 20rpx;
        border-radius:8rpx;
        font-size: 12px;
        &-followed{
            background-color:#eee;
            color:#999;
        }
    }
    &-datashow{
        display:flex;
        padding: 28rpx 80rpx;
        font-size:12px;
        color:#666;
       justify-content: space-around;
        &-item{
            display:flex;
            flex-direction: column;
            text-align: center;
            &-count{
                font-size:14px;
                font-weight: 500;
                color:#333
            }
            &-desc{
               color:#666;
                font-size:12px;
            }
        }
    }
}
</style>